<template>
  <div style="margin-top:50px;">



    <el-form ref="formMon" :model="formMonData" :rules="monRules" size="medium" label-width="100px">

      <el-form-item label="用户名" prop="name">
        <el-input v-model="formMonData.name" placeholder="请输入用户名" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-input v-model="formMonData.sex" placeholder="请输入性别" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="我的生日">
        <el-input v-model="formMonData.birthday" placeholder="请输入我的生日" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="我的地址">
        <el-input v-model="formMonData.address" placeholder="请输入我的地址" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="我的头像" prop="headimg">

        <!--这是vue 上传组件  :before-upload="beforeAvatarUpload"-->
        <el-upload class="avatar-uploader" action="http://localhost:5160/member/headimg" :show-file-list="false"
          :on-success="handleAvatarSuccess" >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>



      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      imageUrl: '',
      formMonData: {
        name: undefined,
        sex: undefined,
        birthday: undefined,
        address: undefined,
        headimg: null,
      },
      monRules: {
        name: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '请输入性别',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '请输入我的生日',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入我的地址',
          trigger: 'blur'
        }],
      },
      headimgAction: 'https://jsonplaceholder.typicode.com/posts/',
      headimgfileList: [],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.initData()
  },
  methods: {
    submitForm() {
      this.$refs['formMon'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['formMon'].resetFields()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      //验证图片格式
      const isJPG = file.type === 'image/jpeg';
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }

      //验证图片大小
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


    //初始数据
    initData() {
      //1、检查用户是否登录（或登录过期）
      var userinfo = localStorage.getItem('ph5userinfo')

      //如果缓存里存放是json字符串，则需要将值转为json对象
      var info = JSON.parse(userinfo)

      if (userinfo == null || userinfo == undefined) {
        //这说明缓存里没有这个key的信息（表示这个用户没有登录）
        //给出提示，去登录
        this.$message({
          showClose: true,
          message: '用户信息已过期，请重新登录',
          type: 'error'
        });
        this.$router.push('/center/login')
      }

      //2、获取登录用户的ID
      let id = info.id
      console.log(id)


      //3、把用户ID当作参数，调用后台API，请求这个用户的详情信息
      // let url='http://localhost:6061/member/info?id='+id
      // this.$http.get(url).then(res=>{
      //    this.formMonData = res.data
      // })


      //4、把获取详情信息，反填到界面UI上      
      this.formMonData.name = info.name
    }
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
  